<template>
  <div id="root">
    <el-row>
      <el-col :span="8">
        <h3 style="margin-top: 30px;text-align:left;margin-left:55px;color: #8c939d">项目任务管理</h3>
      </el-col>
      <el-col :span="12" :offset="4">
        <div class="grid-content bg-purple-dark" style="margin-top: 40px;margin-right: 20px">

          <el-select v-model="value" placeholder="请选择" id="select" style="margin-left: 30px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          &nbsp;
          <el-button type="primary" @click="submit">搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <el-col :span="22" :offset="1">
      <div class="grid-content bg-purple-light">
        <el-table
          height="400"
          :data="tableDatas"
          style="width: 100%">

          <el-table-column
            prop="name"
            label="项目名称">
          </el-table-column>
          <el-table-column
            prop="desc"
            label="项目描述">
          </el-table-column>
          <el-table-column
            prop="start"
            label="开始时间">
          </el-table-column>
          <el-table-column
            prop="end"
            label="结束时间">
          </el-table-column>
          <el-table-column
            prop="part"
            width="100"
            label="部门">
          </el-table-column>
          <el-table-column
            prop="part"
            label="完成情况">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="warning"
                @click="showdetail(scope.$index, scope.row)">
                项目情况
              </el-button>
            </template>
          </el-table-column>

          <el-table-column
            prop="part"
            label="项目文件">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="downloadfile(scope.$index, scope.row)">
                文件下载
              </el-button>
            </template>
          </el-table-column>



        </el-table>
      </div>
      <div class="pagenation">
        <el-pagination
          small
          layout="prev, pager, next"
          :total="total"
          :page-size="page_size"
          @prev-click="prevfun"
          @next-click="nextfun"
          @current-change="currentchange"
        >
        </el-pagination>
      </div>
    </el-col>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      :with-header="false">
      <h2 style="margin-top: 20px">{{show_row.name}}</h2>
      <p style="margin-top: 20px;margin-bottom: 15px">员工贡献情况</p>
      <div id="content">
        <el-divider v-if="taskdetail.length===0">暂时无人有贡献</el-divider>
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item :title="`${detai.staff} ,时间：${detai.create}`" :name="detai.id"
                            v-for="detai in taskdetail">
            <p style="margin-left: 50px">内容：{{detai.content}}</p>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div id="footer">
        <el-col :span="20" :offset="2">
          <el-form v-if="value===0" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px"
                   class="demo-ruleForm">
            <el-form-item label="提交贡献" prop="content">
              <el-input v-model.number="ruleForm.content" type="textarea"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </div>
    </el-drawer>

  </div>
</template>

<script>
  export default {
    name: 'StaffTaskView',
    data () {
      var checkAge = (rule, value, callback) => {
        if (!value || value === '') {
          return callback(new Error('贡献内容不能为空'))
        }
        callback()
      }
      return {
        ruleForm: {
          content: ''
        },
        taskdetail: [],//项目中每个人的贡献情况是个数组
        show_row: '',//拿到要看到的项目id和情况
        drawer: false,
        row: '',
        dialogVisible: false,
        dialogTableVisible: false,
        is_show: 0,//控制失败描述的显示
        total: 5, //所有数据个数
        page_size: 1,//每页数量
        options: [{
          value: 0,
          label: '未完成'
        }, {
          value: 1,
          label: '已完成'
        }
        ],
        value: 0,//完成和未完成
        tableDatas: [],
        rules: {
          content: [
            {
              validator: checkAge,
              trigger: 'blur'
            }
          ]
        }
      }
    },
    mounted () {
      this.get_data()
    },
    methods: {
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
              url: this.$settings.base_url + `/user/detailtask/?task_id=${this.show_row.id}`,
              method: 'post',
              data: { 'content': this.ruleForm.content }
            }).then(res => {
              if (res.data.code === 100) {
                this.$message.success('成功')
                this.showdetail(1, this.show_row)
                this.ruleForm.content = ''
              }
            })

          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      }
      ,

      submit () {

        this.tableDatas = []
        this.get_data()
        this.is_show = this.value
      },
      handleDetail (index, row) {

      },
      //查看项目完成情况
      showdetail (index, row) {
        this.drawer = true
        this.show_row = row
        this.$axios({
          url: this.$settings.base_url + `/user/tasktodetail/?task_id=${row.id}`,
          method: 'get'
        }).then(res => {
          if (res.data.code === 100) {
            this.taskdetail = res.data.data
          }
        })
      },


      //文件下载
      downloadfile (index, row) {
        var arr = row.file.split('.')// /medai/companyfile/新员工手册.docx
        var file_type = arr[arr.length - 1]//获取文件的格式
        this.$confirm('确认下载该项目文件吗？').then(res => {
          this.$axios({
            method: 'get', // 如果是get方法，则写“GET”
            url: this.$settings.base_url + `/user/downtask/?id=${row.id}`,
            responseType: 'blob'
          })
            .then(res => {

              let blob = new Blob([res.data], {
                type: 'application/msword' //这里需要根据不同的文件格式写不同的参数
              })

              let eLink = document.createElement('a')
              eLink.download = `${row.name}.${file_type}` //给文件名和指定格式,浏览器下载时看到的
              eLink.style.display = 'none'
              eLink.href = URL.createObjectURL(blob)
              document.body.appendChild(eLink)
              eLink.click()
              URL.revokeObjectURL(eLink.href)
              document.body.removeChild(eLink)
            })
            .catch(err => {
            })
        }).catch(error => {
          this.$message.warning('取消下载')
        })

      },
      handleDelete () {
        this.dialogVisible = false
        var type = this.value//拿到用户删除时，查看的是什么审核结果
        this.$axios({
          url: this.$settings.base_url + `/user/task/?id=${this.row.id}`,
          method: 'delete'
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success('删除项目任务成功')
            this.value = type
            this.get_data()

          } else {
            this.$message.error(`操作失败，${res.data.error}`)
          }
        })

      },
      //获取数据
      get_data (page = 1) {
        this.$axios({
          url: this.$settings.base_url + `/user/task/?page=${page}&condition=${this.value}&type=${1}`,
          method: 'get',

        }).then(res => {
          //获取到用户信息，赋值给变量
          this.tableDatas = res.data.results
          // this.prev = res.data.links.previous
          // this.next = res.data.links.next
          this.total = res.data.count
          this.page_size = res.data.page_size
        })
      },

      prevfun (value) {
        //value拿到的当前的页码,不用传递，内置的函数，自动传递要前往的页码
        this.get_data(value)
      },
      nextfun (value) {
        //value拿到页码
        this.get_data(value)
      },
      currentchange (value) {
        this.get_data(value)

      },
    }
    ,
  }
</script>

<style scoped>
  #content {
    height: 400px;
    width: 400px;
    overflow: auto;
    margin-left: 20px;
    text-align: left;

  }

  #root {
    text-align: center;
  }

</style>
